<template>
  <div class="description">
    <div class="margin_b40">
      <div v-for="(item, index) in list" :key="index">
        <bs-des-img class="margin_b20" :bsdata="item" v-if="item.type === 'img'"></bs-des-img>
        <bs-des-text class="margin_b20" :bsdata="item" v-if="item.type === 'text'"></bs-des-text>
      </div>
    </div>
    <div class="footer bg_w">
      <div class="footerBtn bg_g tc_w f_16">预约</div>
    </div>
  </div>
</template>

<script>
import bsDesImg from '@/components/bsDescription/bsDesImg.vue'
import bsDesText from '@/components/bsDescription/bsDesText.vue'
export default {
  components: {
    bsDesImg,
    bsDesText
  },
  data() {
    return {
      id: this.$route.params.id,
      list: [
        {
          type: 'img',
          imgSrc: 'https://cdn.pixabay.com/photo/2017/07/13/03/15/paris-2499022_960_720.jpg',
          hasText: true,
          content: {
            title: '总部-3D试衣间',
            time: '9:00-18:00',
            address: '东方明珠花苑明福楼'
          }
        },
        {
          type: 'text',
          content: {
            title: '总部-3D试衣间',
            time: '',
            address: '东方明珠花苑明福楼千誉二楼',
            details: '千誉集团在中国制造业整体达到世界制造强国阵营中等水平；第三步，到新中国成立一百年时，综合实力进入世界制造强国前列。”国家级示范区。作为众多珠三角优秀制造代表企业之一，广州千誉智能科技有限公司是全球智能美体内衣先行者。其前身是广州市千昱服饰有限公司。'
          }
        },
        {
          type: 'img',
          imgSrc: 'https://cdn.pixabay.com/photo/2017/07/13/03/15/paris-2499022_960_720.jpg',
          hasText: false,
          content: {
            title: '',
            time: '',
            address: ''
          }
        },
        {
          type: 'text',
          content: {
            title: '',
            time: '',
            address: '',
            details: '千誉集团在中国制造业整体达到世界制造强国阵营中等水平；第三步，到新中国成立一百年时，综合实力进入世界制造强国前列。”国家级示范区。作为众多珠三角优秀制造代表企业之一，广州千誉智能科技有限公司是全球智能美体内衣先行者。其前身是广州市千昱服饰有限公司。'
          }
        }
      ],
      rich: '<p>MiniUI - 专业WebUI控件库</p><p>&nbsp;</p><p>快速开发，减少50%代码量</p><p>丰富组件库，高性能、低内存</p><p>支持 Java、.NET、PHP</p><p>支持 IE6+、FireFox、Chrome</p>'
    }
  },
  methods: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.description {
  padding: 0.8rem 0 4rem;
  box-sizing: border-box;
  .footer {
    width: 100%;
    height: 6rem;
    position: fixed;
    bottom: 0;
    left: 0;
    .footerBtn {
      width: 34.3rem;
      height: 4rem;
      line-height: 4rem;
      text-align: center;
      border-radius: 4rem;
      margin: 1rem auto;
    }
  }
}
</style>
